<template>
  <div class="compact-card" :class="[shadow ? `is-${shadow}` : '']">
    <div v-if="$slots.header || title" class="compact-card-header">
      <h3 v-if="title">
        <el-icon v-if="icon" class="card-header-icon">
          <component :is="icon" />
        </el-icon>
        {{ title }}
      </h3>
      <slot name="header"></slot>
      <div v-if="$slots.extra" class="compact-card-extra">
        <slot name="extra"></slot>
      </div>
    </div>
    <div class="compact-card-body" :style="bodyStyle">
      <slot></slot>
    </div>
    <div v-if="$slots.footer" class="compact-card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  shadow: {
    type: String,
    default: 'always', // always, hover, never
  },
  bodyStyle: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style scoped>
.compact-card {
  position: relative;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.is-always {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.is-hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.is-hover:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.is-never {
  box-shadow: none;
  border: 1px solid #f0f0f0;
}

.compact-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.compact-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #333;
}

.card-header-icon {
  color: #4266ff;
}

.compact-card-body {
  padding: 15px;
  flex: 1;
}

.compact-card-footer {
  padding: 10px 15px;
  border-top: 1px solid #f0f0f0;
}

.compact-card-extra {
  display: flex;
  align-items: center;
}
</style> 